<template>
  <div class="main-page">
    <router-view></router-view>
    <div class="nav">
      <!-- <router-link to="/main/interview" class="main-page-item"
        >面经</router-link
      >
      <router-link to="/main/keep" class="main-page-item">收藏</router-link>
      <router-link to="/main/like" class="main-page-item">点赞</router-link>
      <router-link to="/main/mine" class="main-page-item">我的</router-link> -->
      <van-tabbar
        v-model="active"
        active-color="#fa6d1d"
        inactive-color="#000000"
      >
        <van-tabbar-item icon="fire-o" to="/main/interview/recommend"
          >面经</van-tabbar-item
        >
        <van-tabbar-item icon="star-o" to="/main/keep">收藏</van-tabbar-item>
        <van-tabbar-item icon="like-o" to="/main/like">点赞</van-tabbar-item>
        <van-tabbar-item icon="user-o" to="/main/mine">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
    };
  },
};
</script>
<style lang="less" scoped>
.main-page .nav {
  display: flex;
  justify-content: space-around;
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  .main-page-item {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #333;
    text-decoration: none;
    padding: 10px 0;
    border-bottom: 2px solid #fff;
    &.router-link-active {
      color: #fa6d1d;
    }
  }
}
</style>
